<template>
	<view class="items flex items-center" @tap="itemClick">
		<view class="flex-1 flex items-center min-w-0">
			<view>{{ `${index + 1}`.padStart(2, 0) }}.{{ item.word }}</view>
			
			<uv-transition v-if="item.play" :show="item.play">
				<view class="mp3icon">
					<view class="item" />
					<view class="item" />
					<view class="item" />
					<view class="item" />
				</view>
			</uv-transition>
			
			<uv-transition v-if="item.blockTranslation" :show="item.blockTranslation">
				<view class="text-30 line-1 flex-1 ml-20">{{ item.translation }}</view>
			</uv-transition>
		</view>
		
		
		<view class="flex items-center">
			<view class="icon" :class="{ correct: item.selected === true }" @click.stop="onSelect"><uv-icon class="flex" name="checkmark" size="28rpx" color="#fff" /></view>
		</view>
	</view>
</template>

<script setup>
	
	import { ref } from 'vue';
	
	/** props */
	const props = defineProps({
		index: Number,
		item: {
			type: Object,
			default: () => ({})
		}
	});

	/** emits */
	const emits = defineEmits(['on-play', 'on-select', 'on-not']);

	/** click */
	function itemClick() {
		emits('on-play');
	};

	/** select */
	const onSelect = () => {
		emits('on-select');
	};


</script>

<style lang="scss" scoped>
.min-w-0{min-width: 0}
.line-1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.items{background-color:#e8ebff;border-radius:12rpx;margin-bottom:30rpx;padding:0 30rpx;font-size:36rpx;font-weight:600;position:relative;overflow:hidden;height: 120rpx}
.icon{border-radius:100%;width:60rpx;height:60rpx;display:flex;align-items:center;justify-content:center;background-color:#aaa;margin-left:20rpx;transition: background-color .3s}
.icon.correct{background-color:#40d463}
.icon.error{background-color:#ff5252}
.selected{background-color:#f69b2c;color:#fff}
.mp3icon{display:flex;flex-flow:rownowrap;align-items:center;justify-content:space-between;width:30rpx;margin-left:20rpx}
.mp3icon .item{width:4rpx;height:14rpx;background-color:#fc5507}
.selected .mp3icon .item{background-color: #fff}
.mp3icon .item:nth-of-type(1){animation:grow 1s -0.45s ease-in-out infinite}
.mp3icon .item:nth-of-type(2){animation:grow 1s -0.3s ease-in-out infinite}
.mp3icon .item:nth-of-type(3){animation:grow 1s -0.15s ease-in-out infinite}
.mp3icon .item:nth-of-type(4){animation:grow 1s ease-in-out infinite}
@keyframes grow {
  0%,
  100%{transform: scaleY(1)}
  50%{transform: scaleY(2)}
}
</style>
